<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'peizhi.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
   <script type="text/javascript">
    

   $(function(){
   

   function _getRandomString() {//生成随机数
     len = 32;
     var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; 
     var maxPos = $chars.length;
     var flag = '';
     for (i = 0; i < len; i++) {
         flag += $chars.charAt(Math.floor(Math.random() * maxPos));
     }
     return flag;
 }
	  
  
   
   
   
   
   $.post(
			"loadPeizhi",
			{},
			function(returnData) {
				
				//var tree1Html = "";
				
				for ( var i = 0; i < returnData.length; i++) {
					var flag=_getRandomString();
				    var tree1 = returnData[i];
                    var input1=$("<input type='text' name='one_tree_name' value='"+tree1.tree_one_name+"' id='"+flag+"'>");
                    var input2=$("<input type='text' name='one_tree_href' value='"+tree1.tree_one_href+"'>");
                    var addButton_tree2=$("<input id='"+flag+"' type='button' value='添加二级菜单' name='add_tree2'>");
	           	    var deleteButton_tree1=$("<input type='button' value='删除' name='delete_tree1'>");
	           		var br=$("<br>");
	           		var name1=$("<font size=2 name='name_tree1'>菜单名</font>");
	           		var href1=$("<font size=2 name='href_tree1'>链接名</font>");
	           		var div=$("<div name='div_tree1'></div>");
                    var deletedivTree1=$("<div name='deletedivTree1'></div>");
	           		           		
					for ( var j = 0; j < tree1.one_to_two.length; j++) {
					   var class1=addButton_tree2.attr("id");
					   var flag2=_getRandomString();
					   var tree2 = tree1.one_to_two[j];
                       var input3="<input type='text' class='"+class1+"' name='two_tree_name' value='"+tree2.tree_two_name+"' id='"+flag2+"'>";
                       var input4="<input type='text' class='"+class1+"' name='two_tree_href' value='"+tree2.tree_two_href+"'>";
                       var name2=$("<font size=2 name='name_tree2'>菜单名</font>");
       		           var href2=$("<font size=2 name='href_tree2'>链接名</font>");
       				  var br2=$("<br>");
       				   var font=$("<font name='font1'>&nbsp;&nbsp;&nbsp;&nbsp;-----</font>");
       			       var addButton_tree3=$("<input id='"+flag2+"' type='button' value='添加三级菜单' name='add_tree3'>");
       				   var deleteButton_tree2=$("<input type='button' value='删除' name='delete_tree2'>");
       				   var div1=$("<div name='div_tree2'></div>");
       				   var deletedivTree2=$("<div name='deletedivTree2'></div>");
       				        
					 		for ( var k = 0; k < tree2.two_to_three.length; k++) {
								var class2=addButton_tree3.attr("id");
								
								var tree3 = tree2.two_to_three[k];
								var input5="<input type='text' name='three_tree_name' value='"+tree3.tree_three_name+"' class='"+class2+"'>";
								var input6="<input type='text' name='three_tree_href' value='"+tree3.tree_three_href+"' class='"+class2+"'>";
								var name3=$("<font size=2>菜单名</font>");
						        var href3=$("<font size=2>链接名</font>");
								var br3=$("<br>");
								var font2=$("<font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----</font>");					   
								var deleteButton_tree3=$("<input type='button' value='删除' name='delete_tree3'>");
								var deletedivTree3=$("<div name='deletedivTree3'></div>");
								deletedivTree3.append(font2).append(name3).append(input5).append(href3).append(input6).append(deleteButton_tree3).append(br3);
                                div1.append(deletedivTree3);
							
					 		}
					 		deletedivTree2.append(font).append(name2).append(input3).append(href2).append(input4).append(addButton_tree3).append(deleteButton_tree2).append(br2).append(div1);
						     div.append(deletedivTree2);
						
						
					}
					
					deletedivTree1.append(br).append(name1).append(input1).append(href1).append(input2).append(addButton_tree2).append(deleteButton_tree1).append(br).append(div);				
					$("#tree").append(deletedivTree1);
				}
				
				

				var add2=$("input[name='add_tree2']");
				for(var i=0;i<add2.length;i++){
					var data=i;
			        add2[i].onclick=function(arg){ 
			        	//alert();
			            return function(){  
			            	//alert(arg);
			                var class1=$("input[name='add_tree2']")[arg].id;//一级id
			                //alert("");
			 		        var flag2=_getRandomString();//新增二级id
			 			    var input3=$("<input class='"+class1+"' type='text' name='two_tree_name' id='"+flag2+"'>");
			 		        var input4=$("<input class='"+class1+"' type='text' name='two_tree_href'>");
			 				var name2=$("<font size=2>菜单名</font>");
			 		        var href2=$("<font size=2>链接名</font>");
			 				var br2=$("<br>");
			 				var font=$("<font>&nbsp;&nbsp;&nbsp;&nbsp;-----</font>");
			 			    var addButton_tree3=$("<input id='"+flag2+"' type='button' value='添加三级菜单'>");
			 				var deleteButton_tree2=$("<input type='button' value='删除'>");
			 				var div1=$("<div></div>");
			 				//alert("dsd");
			 			    $($("div[name='div_tree1']")[arg]).append(font).append(name2).append(input3).append(href2).append(input4).append(addButton_tree3).append(deleteButton_tree2).append(br2).append(div1);
			 			
			 			 deleteButton_tree2.click(function(){
			 			 
			 			    br2.remove();
			 				input3.remove();
			 				input4.remove();
			 				deleteButton_tree2.remove();
			 				name2.remove();
			 				href2.remove();
			 				addButton_tree3.remove();
			 				font.remove();
			 				div1.remove();
			 				
			 			 });  
	 			 
			 			 

				 			addButton_tree3.click(function(){
							    var class2=addButton_tree3.attr("id");
				                
							    var input5=$("<input class='"+class2+"' type='text' name='three_tree_name'>");
						        var input6=$("<input class='"+class2+"' type='text' name='three_tree_href'>");
								var name3=$("<font size=2>菜单名</font>");
						        var href3=$("<font size=2>链接名</font>");
								var br3=$("<br>");
								var font2=$("<font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----</font>");
							   
								var deleteButton_tree3=$("<input type='button' value='删除'>");
								
								
							    div1.append(font2).append(name3).append(input5).append(href3).append(input6).append(deleteButton_tree3).append(br3);
							 
							 
				              deleteButton_tree3.click(function(){
							  
							     input5.remove();
						         input6.remove();
								 name3.remove();
						         href3.remove();
								 br3.remove();
								 font2.remove();
							  	 deleteButton_tree3.remove();
							  
							  });


							 });
		
			            };  
			            
			         
		   
			        }(data);  

					
				}

				
				
				
				var add3=$("input[name='add_tree3']");
				for(var i=0;i<add3.length;i++){
					var data=i;
			        add3[i].onclick=function(arg){ 
			        	//alert();
			            return function(){  
			            	//alert(arg);
			                var class2=$("input[name='add_tree3']")[arg].id;//二级id
			                var input5=$("<input class='"+class2+"' type='text' name='three_tree_name'>");
					        var input6=$("<input class='"+class2+"' type='text' name='three_tree_href'>");
							var name3=$("<font size=2>菜单名</font>");
					        var href3=$("<font size=2>链接名</font>");
							var br3=$("<br>");
							var font2=$("<font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----</font>");
						   	var deleteButton_tree3=$("<input type='button' value='删除'>");
			 			    $($("div[name='div_tree2']")[arg]).append(font2).append(name3).append(input5).append(href3).append(input6).append(deleteButton_tree3).append(br3);
			 			
			 			   deleteButton_tree3.click(function(){
								  
							     input5.remove();
						         input6.remove();
								 name3.remove();
						         href3.remove();
								 br3.remove();
								 font2.remove();
							  	 deleteButton_tree3.remove();
							  
							  });
	 			 
			 			 

		
			            };  
			            
			         
		   
			        }(data);  

					
				}
				
				
				
				var delete1=$("input[name='delete_tree1']");
				for(var i=0;i<delete1.length;i++){
					var data=i;
					delete1[i].onclick=function(arg){
						
						return function(){
							//alert(arg);
							$("div[name='deletedivTree1']")[arg].innerHTML="";
							
						};
						
					}(data);
				}
				
				
				var delete2=$("input[name='delete_tree2']");
				for(var i=0;i<delete2.length;i++){
					var data=i;
					delete2[i].onclick=function(arg){
						
						return function(){
							$("div[name='deletedivTree2']")[arg].innerHTML="";
							
						};
						
					}(data);
				}
				
				
				var delete3=$("input[name='delete_tree3']");
				for(var i=0;i<delete3.length;i++){
					var data=i;
					delete3[i].onclick=function(arg){
						
						return function(){
							$("div[name='deletedivTree3']")[arg].innerHTML="";
							
						};
						
					}(data);
				}
			
			},

			"json");
   
   
   
   
   
   
   
   
   
   
       
	 $("#button1").click(function(){
	     var flag=_getRandomString();
		
		var input1=$("<input type='text' name='one_tree_name' id='"+flag+"'>");
		var input2=$("<input type='text' name='one_tree_href'>");
		var addButton_tree2=$("<input id='"+flag+"' type='button' value='添加二级菜单'>");
	    var deleteButton_tree1=$("<input type='button' value='删除'>");
		var br=$("<br>");
		var name1=$("<font size=2>菜单名</font>");
		var href1=$("<font size=2>链接名</font>");
		var div=$("<div></div>");
		
		$("#tree").append(br).append(name1).append(input1).append(href1).append(input2).append(addButton_tree2).append(deleteButton_tree1).append(br).append(div);
       
		deleteButton_tree1.click(function()
		{
			br.remove();
			input1.remove();
            input2.remove();
			deleteButton_tree1.remove();
			name1.remove();
			href1.remove();
			addButton_tree2.remove();
			div.remove();
			
		});
	 
                 
            addButton_tree2.click(function(){
			    var class1=addButton_tree2.attr("id");
		        var flag2=_getRandomString();
			    var input3=$("<input class='"+class1+"' type='text' name='two_tree_name' id='"+flag2+"'>");
		        var input4=$("<input class='"+class1+"' type='text' name='two_tree_href'>");
				var name2=$("<font size=2>菜单名</font>");
		        var href2=$("<font size=2>链接名</font>");
				var br2=$("<br>");
				var font=$("<font>&nbsp;&nbsp;&nbsp;&nbsp;-----</font>");
			    var addButton_tree3=$("<input id='"+flag2+"' type='button' value='添加三级菜单'>");
				var deleteButton_tree2=$("<input type='button' value='删除'>");
				var div1=$("<div></div>");
				//alert(j);
			    div.append(font).append(name2).append(input3).append(href2).append(input4).append(addButton_tree3).append(deleteButton_tree2).append(br2).append(div1);
			
			 deleteButton_tree2.click(function(){
			 
			    br2.remove();
				input3.remove();
				input4.remove();
				deleteButton_tree2.remove();
				name2.remove();
				href2.remove();
				addButton_tree3.remove();
				font.remove();
				div1.remove();
				
			 });   
		    
			        
			addButton_tree3.click(function(){
			    var class2=addButton_tree3.attr("id");
                
			    var input5=$("<input class='"+class2+"' type='text' name='three_tree_name'>");
		        var input6=$("<input class='"+class2+"' type='text' name='three_tree_href'>");
				var name3=$("<font size=2>菜单名</font>");
		        var href3=$("<font size=2>链接名</font>");
				var br3=$("<br>");
				var font2=$("<font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----</font>");
			   
				var deleteButton_tree3=$("<input type='button' value='删除'>");
				
				
			    div1.append(font2).append(name3).append(input5).append(href3).append(input6).append(deleteButton_tree3).append(br3);
			 
			 
              deleteButton_tree3.click(function(){
			  
			     input5.remove();
		         input6.remove();
				 name3.remove();
		         href3.remove();
				 br3.remove();
				 font2.remove();
			  	 deleteButton_tree3.remove();
			  
			  });


			 });
			
			});


	 });

 
 $("#tijiao").click(function(){
  // alert("tijiao");
     var jsonData="";
     
   for(var i=0;i<$("input[name='one_tree_name']").length;i++){
      var id1=i+1;
      var flag_class=$("input[name='one_tree_name']")[i].id;
	  var two_tree_json="";
	 for(var j=0;j<$("input[name='two_tree_name']").length;j++){//所有two_tree
	     
		 var id2=j+1;
		 
		 if($("input[name='two_tree_name']")[j].className==flag_class){//找出与某个one_tree对应的某个two_tree
		     
			  var flag_class2=$("input[name='two_tree_name']")[j].id;//当前的two_tree
			  var three_tree_json="";
			  for(var k=0;k<$("input[name='three_tree_name']").length;k++){//所有的three_tree
			    
				var id3=k+1;
				 
				if($("input[name='three_tree_name']")[k].className==flag_class2){//与当前two_tree对应的某个three_tree
				
				    var tree_three_name=$("input[name='three_tree_name']")[k].value;
	                var tree_three_href=$("input[name='three_tree_href']")[k].value;
					three_tree_json+="{"+"tree_three_id:"+id3+","+"tree_three_name:"+ '"' +tree_three_name+ '"'+ "," + "tree_three_href:" +'"' +tree_three_href+ '"' +"}"+",";
				}
			  
			  }

                 if(three_tree_json!=""){
		               three_tree_json="["+three_tree_json.substring(0,three_tree_json.length-1)+"]";
     
		             }
			 
			 
			 var tree_two_name=$("input[name='two_tree_name']")[j].value;
	         var tree_two_href=$("input[name='two_tree_href']")[j].value;
			 if(three_tree_json==""){
               two_tree_json+="{"+"tree_two_id:"+id2+","+"tree_two_name:"+ '"' +tree_two_name+ '"'+ "," + "tree_two_href:" +'"' +tree_two_href+ '"' +"," +"two_to_three:" +"[]"+"}"+",";
			 }else{
			    two_tree_json+="{"+"tree_two_id:"+id2+","+"tree_two_name:"+ '"' +tree_two_name+ '"'+ "," + "tree_two_href:" +'"' +tree_two_href+ '"' +"," +"two_to_three:" + three_tree_json+"}"+",";
			
			 }
		 }
		
	  }
	     if(two_tree_json!=""){
		    two_tree_json="["+two_tree_json.substring(0,two_tree_json.length-1)+"]";
     
		 }
      

      var tree_one_name=$("input[name='one_tree_name']")[i].value;
	  var tree_one_href=$("input[name='one_tree_href']")[i].value;
	  if(two_tree_json==""){
	  
	    jsonData+="{"+"tree_one_id:"+id1+","+"tree_one_name:"+ '"' +tree_one_name+ '"'+ "," + "tree_one_href:" +'"' +tree_one_href+ '"' +"," +"one_to_two:" +"[]"+"}"+",";
	  }else{
        jsonData+="{"+"tree_one_id:"+id1+","+"tree_one_name:"+ '"' +tree_one_name+ '"'+ "," + "tree_one_href:" +'"' +tree_one_href+ '"' +"," +"one_to_two:" +two_tree_json +"}"+",";
	  } 

   }
	 jsonData="["+jsonData.substring(0,jsonData.length-1)+"]";
	
	 window.location.href="addPeizhi?jsonData="+jsonData+"";
	//$("#xianshi").html(jsonData);
 
 });
   
     
 
 $("#deleteAll").click(function(){
	   
	   document.getElementById("tree").innerHTML="";
 });
   
   });

   
   
	   
	   
   
   
   </script>
  </head>
  
  <body>
   <input type="button" value="添加一级菜单" id="button1"><div id="tree"></div><br>
  <center><input type="button" id="tijiao" value="提交">&nbsp;<input type="button" id="deleteAll" value="清空"></center>
       <br>
     <center><font color="red" size="+1">${add_peizhi}</font></center>
     <div id="xianshi"></div>
  </body>
</html>
